<template>
  <div class="nine">
    <div class="nine-content">
      <div class="search-details">
        <div class="sd-title">请选择气溶胶类别</div>
        <!-- <div class="sd-title2">生物气溶胶(市政行业)</div> -->
        <div class="collapse">
          <el-collapse v-model="activeCategorys" @change="handleChange">
            <el-collapse-item title="生物气溶胶（市政行业)" name="1">
              <div class="radio-group">
                <el-radio-group
                  v-model="aerosolId"
                  size="small"
                  @change="handleChangeAerosolId"
                >
                  <el-radio
                    v-for="(item, index) in aerosolType_administ"
                    :key="index"
                    :label="item.id"
                    border
                    style="width: 150px"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </div>
            </el-collapse-item>
            <el-collapse-item title="生物气溶胶（石化行业）" name="2">
              <div class="radio-group">
                <el-radio-group
                  v-model="aerosolId"
                  size="small"
                  @change="handleChangeAerosolId"
                >
                  <el-radio
                    v-for="(item, index) in aerosolType_petrifaction"
                    :key="index"
                    :label="item.id"
                    border
                    style="width: 150px"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </div>
            </el-collapse-item>
            <el-collapse-item title="生物气溶胶（医疗行业）" name="3">
              <div class="radio-group">
                <el-radio-group
                  v-model="aerosolId"
                  size="small"
                  @change="handleChangeAerosolId"
                >
                  <el-radio
                    v-for="(item, index) in aerosolType_industry"
                    :key="index"
                    :label="item.id"
                    border
                    style="width: 150px"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </div>
            </el-collapse-item>
            <el-collapse-item title="生物气溶胶（工业生产行业)" name="4">
              <div class="radio-group">
                <el-radio-group
                  v-model="aerosolId"
                  size="small"
                  @change="handleChangeAerosolId"
                >
                  <el-radio
                    v-for="(item, index) in aerosolType_medical"
                    :key="index"
                    :label="item.id"
                    border
                    style="width: 150px"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="search-result" style="margin-top: 15px; margin-bottom: 25px">
        <div class="sr-title">查询结果(点击下方以获得更多信息)</div>
        <el-collapse
          class="sr-collapse"
          v-model="activeNames"
          @change="handleChange"
        >
          <el-collapse-item name="1" class="a" title="可培养总气溶胶">
            <div class="table">
              <el-table
                :data="tableData['可培养总气溶胶']"
                style="width: 100%"
                @row-click="clickRowHandle"
                row-key="id"
                :expand-row-keys="expands"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item
                        class="redDemo"
                        label="浓度"
                        label-width="69px"
                      >
                        <div class="special-p">
                          <p>{{ props.row.concen }}</p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="采样地点">
                        <div class="special-p">
                          <p>
                            {{ props.row.label }}
                          </p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构">
                        <div class="special-p">
                          <div class="struct">
                            {{ props.row.structure }}
                          </div>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构详情">
                        <div
                          class="special-p"
                          style="
                            margin-left: 66px;
                            margin-bottom: 20px;
                            margin-top: 10px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolDegraStructureList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                              padding: '0',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="name"
                              label="菌群名称"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="percentage"
                              label="百分比"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="advantage"
                              label="优势种"
                              width="400"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="粒径信息">
                        <div
                          class="special-p"
                          style="
                            margin-left: 95px;
                            margin-bottom: 20px;
                            margin-top: 5px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolSizeList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="low"
                              label="下限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="upper"
                              label="上限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="粒径单位"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="250"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="参考链接">
                        <div class="special-p">
                          <div class="struct">
                            <a :href="props.row.refLink" target="_blank">{{
                              props.row.refText
                            }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="      "
                  style="display: none"
                  prop="refTitle"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2" title="细菌气溶胶">
            <div class="table">
              <el-table
                :data="tableData['细菌气溶胶']"
                style="width: 100%"
                @row-click="clickRowHandle"
                row-key="id"
                :expand-row-keys="expands"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="浓度" label-width="69px">
                        <div class="special-p">
                          <p>{{ props.row.concen }}</p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="采样地点">
                        <div class="special-p">
                          <p>
                            {{ props.row.label }}
                          </p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构">
                        <div class="special-p">
                          <div class="struct">
                            {{ props.row.structure }}
                          </div>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构详情">
                        <div
                          class="special-p"
                          style="
                            margin-left: 66px;
                            margin-bottom: 20px;
                            margin-top: 10px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolDegraStructureList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="name"
                              label="菌群名称"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="percentage"
                              label="百分比"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="advantage"
                              label="优势种"
                              width="400"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="粒径信息">
                        <div
                          class="special-p"
                          style="
                            margin-left: 95px;
                            margin-bottom: 20px;
                            margin-top: 5px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolSizeList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="low"
                              label="下限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="upper"
                              label="上限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="粒径单位"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="250"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="参考链接">
                        <div class="special-p">
                          <div class="struct">
                            <a :href="props.row.refLink" target="_blank">{{
                              props.row.refText
                            }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="          "
                  style="display: none"
                  prop="rrefTitle"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3" title="真菌气溶胶">
            <div class="table">
              <el-table
                :data="tableData['真菌气溶胶']"
                style="width: 100%"
                @row-click="clickRowHandle"
                row-key="id"
                :expand-row-keys="expands"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="浓度" label-width="69px">
                        <div class="special-p">
                          <p>{{ props.row.concen }}</p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构">
                        <div class="special-p">
                          <div class="struct">
                            {{ props.row.structure }}
                          </div>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="采样地点">
                        <div class="special-p">
                          <p>
                            {{ props.row.label }}
                          </p>
                        </div>
                      </el-form-item>
                      <br />
                      <!-- <el-form-item label="群落结构">
                        <div class="special-p">
                          <p>
                            {{ props.row.structure }}
                          </p>
                        </div>
                      </el-form-item>
                      <br /> -->
                      <el-form-item label="群落结构详情">
                        <div
                          class="special-p"
                          style="
                            margin-left: 66px;
                            margin-bottom: 20px;
                            margin-top: 10px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolDegraStructureList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="name"
                              label="菌群名称"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="percentage"
                              label="百分比"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="advantage"
                              label="优势种"
                              width="400"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="粒径信息">
                        <div
                          class="special-p"
                          style="
                            margin-left: 95px;
                            margin-bottom: 20px;
                            margin-top: 5px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolSizeList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="low"
                              label="下限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="upper"
                              label="上限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="粒径单位"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="250"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="参考链接">
                        <div class="special-p">
                          <div class="struct">
                            <a :href="props.row.refLink" target="_blank">{{
                              props.row.refText
                            }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="          "
                  style="display: none"
                  prop="refTitle"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4" title="病毒气溶胶">
            <div class="table">
              <el-table
                :data="tableData['病毒气溶胶']"
                style="width: 100%"
                @row-click="clickRowHandle"
                row-key="id"
                :expand-row-keys="expands"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="浓度" label-width="69px">
                        <div class="special-p">
                          <p>{{ props.row.concen }}</p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="采样地点">
                        <div class="special-p">
                          <p>
                            {{ props.row.label }}
                          </p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构">
                        <div class="special-p">
                          <div class="struct">
                            {{ props.row.structure }}
                          </div>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="粒径信息">
                        <div
                          class="special-p"
                          style="
                            margin-left: 95px;
                            margin-bottom: 20px;
                            margin-top: 5px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolSizeList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="low"
                              label="下限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="upper"
                              label="上限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="粒径单位"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="250"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构详情">
                        <div
                          class="special-p"
                          style="
                            margin-left: 66px;
                            margin-bottom: 20px;
                            margin-top: 10px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolDegraStructureList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="name"
                              label="菌群名称"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="percentage"
                              label="百分比"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="advantage"
                              label="优势种"
                              width="400"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="参考链接">
                        <div class="special-p">
                          <div class="struct">
                            <a :href="props.row.refLink" target="_blank">{{
                              props.row.refText
                            }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="          "
                  style="display: none"
                  prop="refTitle"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="5" title="代谢物">
            <div class="table">
              <el-table
                :data="tableData['代谢物']"
                style="width: 100%"
                @row-click="clickRowHandle"
                row-key="id"
                :expand-row-keys="expands"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="浓度" label-width="69px">
                        <div class="special-p">
                          <p>{{ props.row.concen }}</p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="采样地点">
                        <div class="special-p">
                          <p>
                            {{ props.row.label }}
                          </p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构">
                        <div class="special-p">
                          <div class="struct">
                            {{ props.row.structure }}
                          </div>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构详情">
                        <div
                          class="special-p"
                          style="
                            margin-left: 66px;
                            margin-bottom: 20px;
                            margin-top: 10px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolDegraStructureList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="name"
                              label="菌群名称"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="percentage"
                              label="百分比"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="advantage"
                              label="优势种"
                              width="400"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item
                        label="粒径信息"
                        style="
                          margin-left: 95px;
                          margin-bottom: 20px;
                          margin-top: 5px;
                        "
                      >
                        <div class="special-p">
                          <el-table
                            :data="props.row.aerosolSizeList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="low"
                              label="下限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="upper"
                              label="上限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="粒径单位"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="250"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="参考链接">
                        <div class="special-p">
                          <div class="struct">
                            <a :href="props.row.refLink" target="_blank">{{
                              props.row.refText
                            }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="          "
                  style="display: none"
                  prop="refTitle"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="6" title="荧光生物气溶胶">
            <div class="table">
              <el-table
                :data="tableData['荧光生物气溶胶']"
                style="width: 100%"
                @row-click="clickRowHandle"
                row-key="id"
                :expand-row-keys="expands"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="浓度" label-width="69px">
                        <div class="special-p">
                          <p>{{ props.row.concen }}</p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="采样地点">
                        <div class="special-p">
                          <p>
                            {{ props.row.label }}
                          </p>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构">
                        <div class="special-p">
                          <div class="struct">
                            {{ props.row.structure }}
                          </div>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="群落结构详情">
                        <div
                          class="special-p"
                          style="
                            margin-left: 66px;
                            margin-bottom: 20px;
                            margin-top: 10px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolDegraStructureList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="name"
                              label="菌群名称"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="percentage"
                              label="百分比"
                              width="200"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="advantage"
                              label="优势种"
                              width="400"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="粒径信息">
                        <div
                          class="special-p"
                          style="
                            margin-left: 95px;
                            margin-bottom: 20px;
                            margin-top: 5px;
                          "
                        >
                          <el-table
                            :data="props.row.aerosolSizeList"
                            style="width: 100%"
                            :header-cell-style="{
                              background: '#eef1f6',
                              color: 'black',
                            }"
                            :cell-style="{ height: '35px', padding: '0' }"
                          >
                            <el-table-column
                              prop="low"
                              label="下限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="upper"
                              label="上限"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="粒径单位"
                              width="250"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="concen"
                              label="浓度"
                              width="250"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-form-item>
                      <br />
                      <el-form-item label="参考链接">
                        <div class="special-p">
                          <div class="struct">
                            <a :href="props.row.refLink" target="_blank">{{
                              props.row.refText
                            }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="          "
                  style="display: none"
                  prop="refText"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { getAerosolData, getAerosolAllType } from "@/api/publicSearch";
export default {
  name: "SearchView",
  data() {
    return {
      //激活查询结果
      activeNames: [],
      //激活类别
      activeCategorys: [],
      activeNamesAll: ["0"],
      searchGasDetails: "",
      //气溶胶类别
      list: [],
      //气溶胶所有类别
      aerosolType_administ: [],
      aerosolType_petrifaction: [],
      aerosolType_medical: [],
      aerosolType_industry: [],
      // tableData: {},
      //搜索框获取气溶胶类别id
      tableData: {},
      aerosolId: "",
      expands: [],
    };
  },
  mounted() {
    // axios
    //   .get("http://localhost:9999/vocs/aerosolcategory/category/" + "市政行业")
    //   .then((res) => {
    //     this.list = res.data.data;
    //     console.info(this.list)
    //   });
    getAerosolAllType().then((res) => {
      this.aerosolType_administ = res.data.data["市政行业"];
      console.info(this.aerosolType_administ);
      this.aerosolType_petrifaction = res.data.data["石化行业"];
      this.aerosolType_medical = res.data.data["医疗行业"];
      this.aerosolType_industry = res.data.data["工业生产行业"];
    });
  },
  methods: {
    gotoNewpage() {
      this.$router.push({
        path: "/classify",
        query: {
          voc: this.voc,
        },
      });
    },
    handleChange(val) {
      console.log(val);
    },
    handleChangeAll(val) {
      console.log(val, "last");
    },
    searchGas() {
      // this.aerosolId = this.searchGasDetails[this.searchGasDetails.length - 1];
      //todo 获取气溶胶类别有关的气溶胶信息
      // axios
      //   .get("http://localhost:9999/vocs/aerosolitems/map/" + this.aerosolId)
      //   .then((res) => {
      //     this.tableData = res.data.data;
      //   });
      getAerosolData(this.aerosolId).then((res) => {
        this.tableData = res.data.data;
      });
    },
    //
    handleChangeAerosolId() {
      // axios
      //   .get("http://localhost:9999/vocs/aerosolitems/map/" + this.aerosolId)
      //   .then((res) => {
      //     this.tableData = res.data.data;
      //   });
      getAerosolData(this.aerosolId).then((res) => {
        this.tableData = res.data.data;
      });
    },
    clickRowHandle(row) {
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id);
      } else {
        this.expands.push(row.id);
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";
.centerDiv {
  margin: 0 auto;
}
.struct {
  width: 1000px;
  line-height: 20px;
  word-wrap: break-word;
  margin-top: 10px;
  margin-bottom: 20px;
}
.nine {
  overflow-x: hidden;
  // div[class^="el-collapse-item"] :hover {
  //   color: blue;
  // }
}
::v-deep .el-collapse-item__header:hover {
  color: rgba(0, 84, 190, 1);
}
// ::v-deep .el-table .cell:hover{
//   color: blue;
// }
::v-deep .el-table td.el-table__cell div:hover {
  color: rgba(0, 84, 190, 1);
}
.table {
  position: relative;
  top: -30px;
}
.nine-content {
  width: 2500px;
  margin-left: 0px;
}
.search-details {
  width: 60%;
  margin-left: 0px;
  // margin: 0 auto;
}
.search-result {
  width: 55%;
  // margin: 0 auto;
  margin-top: 20px;
  margin-left: 10px;
}
.sd-title {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}
.sd-title2 {
  text-align: left;
  font-size: #{$second_font_size};
  font-weight: #{$second_font_weight};
  margin-top: #{$second_titile_top}px;
  margin-left: #{$second_titile_left}px;
  margin-bottom: #{$second_titile_bottom}px;
}
.sr-title {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}
.sr-all {
  // display: flex;
  // flex-wrap: wrap;
  img {
    width: 80px;
    margin-left: 23px;
  }
  .sra-content {
    margin-left: 40px;
    text-align: left;
  }
}
.radio {
  margin-top: 30px;
  padding-left: 50px;
  text-align: left;
}
.el-cascader {
  margin-top: 10px;
  width: 100%;
}
.el-cascader-menu {
  min-width: 350px !important;
}
// .cascader-content>div{
//   display: inline-block;
// }
.cascader-content {
  display: flex;
  margin-top: 10px;
  margin-left: 20px;
  // align-items: center;
}
.cascader-content-one {
  width: 350px;
  // flex-grow: 1;
}
.cascader-content-two {
  margin-top: 10px;
}
.cct-button {
  border-radius: 0 3px 3px 0;
  background: #f5f7fa;
}
.special-p {
  margin-left: 100px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
  .el-form--inline .el-form-item__content {
    display: block;
    margin-top: 4px;
  }
}
// .special-p :hover{
//   color: black !important;
// }
// div.cell :hover{
//   color: black !important;
// }

.sr-collapse {
  text-align: left;
  font-size: #{$second_font_size};
  font-weight: #{$second_font_weight};
  margin-top: #{$second_titile_top}px;
  margin-left: #{$second_titile_left}px;
  margin-bottom: #{$second_titile_bottom}px;
}
.demo-table-expand {
  margin-left: 80px;
  width: 90%;
}
.radio-group {
  text-align: left;
  font-size: #{$third_font_size};
  font-weight: #{$third_font_weight};
  margin-top: #{$third_titile_top}px;
  margin-left: #{$third_titile_left}px;
  margin-bottom: #{$third_titile_bottom}px;
}

.el-form :hover {
  color: black !important;
}
//设置间隔
.el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-collapse-item__header {
  align-items: flex-start;
  height: 40px;
  line-height: 40px;
}
::v-deep .el-collapse-item__arrow {
  margin: 15px;
  order: -1;
}
.el-form-item {
  margin-bottom: -20px;
}
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  // height: 10px;
  padding: 2px 0;
}
::v-deep .el-table .el-table__cell {
  cursor: pointer;
  padding: 6px 0;
  .el-table__header tr,
  .el-table__header th {
    // height: 10px;
    padding: 0px 0;
  }
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0px;
}
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0px;
  margin-top: 10px;
}

.collapse {
  margin-left: #{$second_titile_left}px;
}

//调整气溶胶种类框start
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}

::v-deep .el-collapse-item__wrap {
  will-change: height;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 0px;
}
//调整气溶胶种类框end
a:visited {
  color: rgba(0, 84, 190, 1);
}
a:link {
  color: rgba(0, 84, 190, 1); /* 修改未访问链接的颜色为蓝色 */
  text-decoration: none; /* 移除下划线 */
}
</style>
